<template>
  <div class="div_right_message_friend">
    <el-row>
      <el-col :span="1">
        <div class="grid-content bg-purple">
          <div class="div_right_message_friend_photo">
            <!--            img url 如果为空,则应该是单聊.-->
            <img v-if="obj.img_url === ''" class="div_right_message_friend_photo_img"
                 :src="this.$store.state.chartStatus.nowSessionInfo.user_img_url" alt="">
            <img v-if="obj.img_url !== ''" class="div_right_message_friend_photo_img"
                 :src="obj.img_url" alt="">
          </div>
        </div>
      </el-col>

      <el-col :span="22">
        <div class="grid-content bg-purple-light el_col_friend_msg">
          <div class="div_right_message_friend_name" v-if="obj.username === ''">
            {{ this.$store.state.chartStatus.nowSessionInfo.user_name }}
          </div>
          <div class="div_right_message_friend_name" v-if="obj.username !== ''">
            {{ obj.username }}
          </div>
          <div class="div_right_message_friend_msg">
            {{ obj.body }}
          </div>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
export default {
  name: "message_friend",
  props: ['obj'],
  // props: {
  //   message: {
  //     type: String,
  //   },
  // },
}
</script>

<style scoped>

.div_right_message_friend {
  margin-top: 10px;
  margin-left: 12px;
  margin-bottom: 20px;
}

.div_right_message_friend_photo {
  display: inline-block;
  width: 40px;
}

.div_right_message_friend_photo_img {
  border-radius: 4px;
  width: 32px;
  height: 32px;
}

.div_right_message_friend_msg {
  display: inline-block;
  background-color: #eeeeee;
  border-radius: 5px;
  padding: 8px 10px 10px 8px;
}

/*122, 123, 123*/
.div_right_message_friend_name {
  margin-top: -2px;
  font-weight: 400;
  font-size: 12px;
  color: #7a7b7b;
  margin-bottom: 4px;
}

.el_col_friend_msg {
  margin-right: 20px;
}

</style>